<style lang="less">
    @import './main.less';
</style>
<template>
    <div class="main" :class="{'main-hide-text': shrink}" ref="mainBody">
        <div class="sidebar-menu-con" :style="{width: shrink?'60px':'200px', overflow: shrink ? 'visible' : 'auto'}">
            <div class="layout-logo">
                <!-- <img style="height:40px" src="../assets/logo_quanpin.png" key="max-logo" /> -->
                <span class="bate">阳和通</span>
            </div>
            <CpMenu ref="cpMenu" :before-push="beforePush" :open-names="openedSubmenuArr" :collapse="shrink" :menu-list="menuList" />
        </div>
        <div class="main-header-con" :style="{paddingLeft: shrink?'60px':'200px'}">
            <!--  <div class="main-header">
                <div class="navicon-con">
                    <i class="md-arrow-back" size="32" :style="{lineHeight:'40px',transform: 'rotateZ(' + (this.shrink ? '-180' : '0') + 'deg)'}" @click="toggleClick" />
                </div>
                <div class="header-middle-con">
                    
                </div>
            </div> -->
            <div style="position: relative;">
                <div class="navicon-con" style="float:left;width:40px">
                    <i class="el-icon-s-fold" :style="{fontSize:'25px',paddingLeft:'10px',lineHeight:'40px',transform: 'rotateZ(' + (this.shrink ? '-180' : '0') + 'deg)'}" @click="toggleClick" />
                </div>
                <custom-breadcrumb :currentPath="currentPath">
                </custom-breadcrumb>
                <div style="position:absolute;right:20px;top:0px;bottom:0px">
                    <el-button size="small" @click="outgo" type="success">订单发货</el-button>
                    <a href="javascript:void(0)" @click="goToBell">
                        <i :class="{'el-icon-bell abell':true,'unread':sysUnread>0}">
                            <el-badge :value="sysUnread" v-if="sysUnread>0"></el-badge>
                        </i>
                    </a>
                    <el-dropdown style="margin-left:20px" transfer trigger="click" @command="itemClick">
                        <a href="javascript:void(0)">
                            <span class="main-user-name">{{ userName }}({{roleName}})</span>
                            <i class="el-icon-arrow-down" />
                        </a>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="wxWork">微信绑定</el-dropdown-item>
                            <el-dropdown-item command="ownSpace">修改密码</el-dropdown-item>
                            <el-dropdown-item command="loginout" divided>退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
            <div class="tags-con">
                <tags-page-opened :pageTagsList="pageTagsList"></tags-page-opened>
            </div>
        </div>
        <div class="single-page-con" :style="{left: shrink?'60px':'200px'}">
            <div class="single-page">
                <keep-alive :include="cachePage">
                    <router-view></router-view>
                </keep-alive>
            </div>
        </div>
        <el-backtop target=".single-page-con" :bottom="50">
            <div style="{
        height: 100%;
        width: 100%;
        background-color: #f2f5f6;
        box-shadow: 0 0 6px rgba(0,0,0, .12);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
      }">
                <i class="el-icon-top"></i>
            </div>
        </el-backtop>
        <el-drawer title="打印机设置" :visible.sync="drawer" :direction="'rtl'">
            <div style="padding:0px 10px">
                <el-form ref="searchKeyForm">
                    <el-form-item label="打印机" prop="printer" style="margin-bottom: 15px;width: 100%">
                        <el-select style="display:block" v-model="printName" placeholder="选择打印机">
                            <el-option v-for="(pt,ind) in printers" :key="ind" :label="pt.name" :value="pt.name"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="printWay" style="margin-bottom: 15px;width: 100%" label="打印方式">
                        <el-radio-group size="small" v-model="printWay">
                            <el-radio :label="true">预览打印</el-radio>
                            <el-radio :label="false">静默打印</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item>
                        <el-button v-on:click="setPrintOk()" type="success" size="small">确定</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-drawer>
    </div>
</template>
<script>
import CpMenu from '../Menu.vue'
import TopMenu from '../TopMenu.vue'
import util from "@/utils/util"
import { getRand } from "@/utils/random"
// import iNotify from '@/assets/iNotify'
import TagsPageOpened from '@/components/Nav/TagsPageOpened.vue'
import CustomBreadcrumb from '@/components/Nav/CustomBreadcrumb.vue'
export default {
    name: "Main",
    data() {
        return {
            printIds: [],
            //   tpurl: "http://cloudprint.cainiao.com/template/standard/553754/9",
            tpurl: "http://cloudprint.cainiao.com/template/standard/553754/10",
            tpprinturl: "http://cloudprint.cainiao.com/template/standard/555018/1",
            tpplanurl: "https://cloudprint.cainiao.com/template/standard/573902/13",
            tpplantaskurl: "https://cloudprint.cainiao.com/template/standard/582829/6",
            drawer: false,
            printerShow: false,
            printers: [],
            printName: "",
            printWay: true,
            socket: null,

            shrink: false,
            avatorPath: '',
            interval: null,
            openedSubmenuArr: this.$store.state.app.openedSubmenuArr,


        };
    },
    components: {
        CpMenu,
        TopMenu,
        TagsPageOpened,
        CustomBreadcrumb
    },
    create: function() {
        this.$store.commit('setOpenedList');
    },
    computed: {
       
        sysUnread: function() {

            return this.$store.state.notify.notifyPlanCount.sysUnread;
        },
        menuListHash() {
            let ok = false;
            this.$store.state.app.menuList.forEach((child) => {

                if (child.name == "Outgo" || child.name == "MainOutgo") {
                    ok = true;
                }
            });
            return ok;
        },
        userName() {
            // return this.$store.state.user.userName;
            return localStorage.userName;
        },
        roleName() {
            // return this.$store.state.user.userName;
            return localStorage.roleName;
        },
        merchId() {

            return localStorage.userId;
        },
        menuList() {
            return this.$store.state.app.menuList;
        },
        pageTagsList() {
            let dt = this.$store.state.app.pageOpenedList;
            // dt.forEach((dh)=>{
            //     if(db.title=="首页"){

            //     }
            // });
            return dt; // 打开的页面的页面对象
        },

        
        currentPath() {
            return this.$store.state.app.currentPath; // 当前面包屑数组
        },

        cachePage() {
            return this.$store.state.app.cachePage;
        },
        lang() {
            return this.$store.state.app.lang;
        },
        menuTheme() {
            return this.$store.state.app.menuTheme;
        },
        mesCount() {
            return this.$store.state.app.messageCount;
        }
    },
    mounted: function() {


    },
    beforeRouteLeave(to, from, next) {

        if (to.name == "Login" && this.interval) {
            window.clearInterval(this.interval);

        }


        next();
    },
    beforeRouteUpdate(to, from, next) {



        next();
    },
    beforeRouteEnter(to, from, next) {

        next();
    },
    watch: {
        '$route'(to) {

            this.$store.commit('setCurrentPageName', to.name);

            let pathArr = util.setCurrentPath(this, to.name);
            if (pathArr.length > 2) {
                this.$store.commit('addOpenSubmenu', pathArr[1].name);
            }
            this.checkTag(to.name);
            localStorage.currentPageName = to.name;
        }
    },
    methods: {
         outgo: function() {
            this.$router.push({
                name: "Outgo"
            });
        },
        checkTag(name) {
            let openpageHasTag = this.pageTagsList.some(item => {
                if (item.name === name) {
                    return true;
                }
            });
            if (!openpageHasTag) { //  解决关闭当前标签后再点击回退按钮会退到当前页时没有标签的问题
                util.openNewPage(this, name, this.$route.params || {}, this.$route.query || {});
            }
        },
        beforePush(name) {
            // if (name === 'accesstest_index') {
            //     return false;
            // } else {
            //     return true;
            // }
            return true;
        },
        toggleClick() {
            this.shrink = !this.shrink;
        },
        goToBell: function() {
            this.$router.push({ name: "Notification" });
        },
        itemClick: function(name) {
            if ("ownSpace" == name) {
                this.$router.push({ name: "Password" }, () => {}, (e) => {

                });
            } else if ("wxWork" == name) {
                this.$router.push({ name: "Weixin" }, () => {}, (e) => {

                });
            } else this.loginout();
        },
        loginout: function(name) {

            var me = this;
            me.$store
                .dispatch("loginOut")
                .then(res => {

                    if (res.status == 0) {
                        me.$router.push("/login");
                    } else {
                        me.errorMessage(res.info);
                    }
                }).catch(error => {


                    me.errorMessage('操作异常');

                });

        }
    }
}
</script>
<style>
.optButton {
    float: right;
    margin-right: 10px;
}

.bate {
    position: absolute;
    bottom: 5px;
    right: 5px;
    font-size: 14px;
}

i.el-icon-bell.abell {
    display: inline-block;
    width: 40px;
    height: 40px;
    text-align: center;
    margin-right: 10px;
    padding-top: 10px;
    color: #409EFF;
    font-size: 1.5em;
    vertical-align: middle;
}

i.el-icon-bell.abell:hover {
    color: #cccccc;
}

i.el-icon-bell.abell.unread {
    color: #FF0000;
}
</style>